﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Content.Master" Inherits="System.Web.Mvc.ViewPage<MethodWorx.CMS.UI.Models.ContentModel>" %>
<%@ Import Namespace="System.IO" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <style>
        div.macroItem
        {
            padding:2px;
            border:1px solid white;
            cursor:pointer;
        }
        
        div.macroItem:hover
        {
            border:1px solid #d8f0fa;
            background-color:#e7f4f9;
        }
    </style>

    <script language="javascript" src="<%=Url.Content("~/Scripts/jquery.jstree.js")%>"></script>
    <script language="javascript">

        $(document).ready(function () {
            $(window).resize(resizeIFrame);
            resizeIFrame();

            $("#createButton").click(function (e) {
                $("#macros").show();
                e.preventDefault();
                e.stopPropagation();
            });

            $(".macroItem").click(function (e) {
                window.parent.parent.openDialog("<%=Url.Content("~/Dashboard")%>/TemplateGallery/Install?macro=true&filename=" + $(this).attr("filename"), "Execute Macro: " + $(this).text());
            });
        });

        $(document).click(function () {
            $("#macros").hide();
        });

        $(document).ready(function () {
            bindTabs();

            $("#galleryButton").click(function () {
                window.parent.openDialog("<%=Url.Content("~/Dashboard")%>/TemplateGallery?dialogMode=true", "Template Gallery");
            });
        });

        function bindTabs() {
            $(".content-tab").unbind("click");
            $(".content-tab").click(function () {
                $("div.content-tab").removeClass("active");
                $(this).addClass("active");

                $(".contentTabArea").hide();
                $("#" + $(this).attr("tabId")).show();
            });

            $(".content-tab").first().click();
        }

        function resizeIFrame() {
            $("html").height($(window).height() - 20);
            $("body").height("100%");
            $("#contentTree").height($(window).height() - 78);
            $("#contentArea").height($(window).height() - 45);
            $(".contentTabArea").width($(window).width() - 270);
            $(".contentTabArea").height($(window).height() - 37);
            $(".contentTabArea").css("padding", "0px");
        }
    </script>
    
    <div id="site-content-header">
        <div style="float:left">
            <img src="<%=Url.Content("~/Images/site/content-structure.png")%>" />
        </div>
        <div style="padding-top:10px;background-color:transparent;" id="tabContainer">
            <!--<div class="content-tab" tabId="tabs-1">
                <div class="left"></div>
                <div class="face">Editor</div>
                <div class="right"></div>
            </div>
            <div class="content-tab" tabId="tabs-2">
                <div class="left"></div>
                <div class="face">Template</div>
                <div class="right"></div>
            </div>
            <div class="content-tab" tabId="tabs-3">
                <div class="left"></div>
                <div class="face">Content</div>
                <div class="right"></div>
            </div>
            <div class="content-tab" tabId="tabs-4" id="propertiesTab">
                <div class="left"></div>
                <div class="face">Properties</div>
                <div class="right"></div>
            </div>
            <div class="content-tab" tabId="tabs-5">
                <div class="left"></div>
                <div class="face">System</div>
                <div class="right"></div>
            </div> -->
        </div>
        <div style="float:right;padding-right:10px;margin-top:-5px;">
            <%if(this.Model.Macros.Length != 0)
              {%>
            <button id="createButton"><img src="<%=Url.Content("~/images/icons/add.png")%>" align="absmiddle"/>&nbsp;Shortcuts...</button>
            <div style="position:absolute;display:none; background-color:white;padding:2px;border:1px solid silver;width:150px;" id="macros">
                <%foreach(var macro in this.Model.Macros)
                  {
                %>
                    <div class="macroItem" filename="<%=Path.GetFileName(macro.Filename) %>"><%=macro.GetParser().Name%></div>
                <%
                }%>
            </div>
            <%
              }%>
            <button id="galleryButton"><img src="<%=Url.Content("~/images/icons/images.png")%>" align="absmiddle"/>&nbsp;Gallery...</button>
        </div>
    </div>
    <div style="clear:both">
    <div id="container">
        <div style="width:250px;height:100%;float:left;background-color:#EBEBEB;" id="contentTreeContainer">
            <div style="height: 32px; background-image: url(<%=Url.Content("~/images/site/toolbar-background.png")%>); padding-top: 5px; font-size: 62.5%;border-bottom:1px solid gray" id="treeToolbar">
            </div>
            <div style="padding-left:5px;padding-top:5px;overflow:auto">
                <div id="contentTree" style="background-color:#EBEBEB">
                </div>
            </div>   
        </div>
        <!--
        <iframe class="contentTabArea" id="tabs-1" name="tabs-1" style="border:1px solid silver;float:left">
        </iframe>
        <iframe class="contentTabArea" id="tabs-3" style="border:1px solid silver;float:left;display:none;">
        </iframe>
        <iframe class="contentTabArea" id="tabs-4" style="border:1px solid silver;float:left;display:none;">
        </iframe>-->
    </div>


    <script language="javascript">


        $(document).ready(function () {
            
        });

        function createPage(obj) {
            window.parent.openDialog("<%=Url.Content("~/Content")%>/CreatePage/" + obj.attr("pageId"), "Create Page");
        }

        function deletePage(obj) {
            if(confirm("Are you sure you want to delete this page and all child pages and content items"))
            {
                $.getJSON("<%=Url.Content("~/Content")%>/DeletePage/" + obj.attr("pageId"));
                var parent = $('#contentTree').jstree('_get_parent', obj);
                $('#contentTree').jstree('refresh', parent);
            }
        }

        function previewPage(obj)
        {
            var pageId = obj.attr("pageId");
            
            //
            //  ok, here we go, remove the custom tabs
            $(".custom-tab-header").remove();
            $(".custom-tab-area").remove();

            $.getJSON("<%=Url.Content("~/Content")%>/GetPagePreviewUrl/" + pageId, function(result)
            {
                if(result.success)
                {
                    $("#tabs-1").attr("src",  result.url + "#" + window.location.host);
                    $("#tabs-3").attr("src", "/Content/Content/" + pageId);
                    $("#tabs-4").attr("src", "/Page/Properties/" + pageId);

                    //
                    // here we need to get the extension points for the menu item
                    $.ajax({ url: "<%=Url.Content("~/Page")%>/GetIdeExtensions/" + pageId, dataType: "json", success: function (data) {

                        for (var i = 0; i < data.length; i++) {
                            $("<div class=\"content-tab custom-tab-header\" tabId=\"custom-tabs-" + i + "\"><div class=\"left\"></div><div class=\"face\">" + data[i].Name + "</div><div class=\"right\"></div></div>").appendTo("#tabContainer");
                            $("<iframe class=\"contentTabArea custom-tab-area\" id=\"custom-tabs-" + i + "\" style=\"border:1px solid silver;display:none;float:left;\" src=\"/Plugin/Page/" + data[i].Id + "/" + pageId + "\"></iframe>").insertAfter("#tabs-4");
                        }
                        bindTabs();
                        resizeIFrame();
                    }, cache: false });
                }
            });
    }

    function insertTab(id, text, url) {
        $("<div class=\"content-tab custom-tab-header\" tabId=\"custom-tabs-" + id + "\"><div class=\"left\"></div><div class=\"face\">" + text + "</div><div class=\"right\"></div></div>").appendTo("#tabContainer");
        $("<iframe class=\"contentTabArea custom-tab-area\" id=\"custom-tabs-" + id + "\" style=\"border:1px solid silver;display:none;float:left;\" src=\"" + url + "\"></iframe>").insertAfter("#contentTreeContainer");
    }

    function clearTabs() {
        $(".custom-tab-header").remove();
        $(".custom-tab-area").remove();
    }

    var selectedNode;
    var contextNode;

    $(document).ready(function () {
        $(".content").css("margin", "0px");
        $("#contentTree").jstree(
            {
                "json_data":
                {
                    "ajax":
                    {
                        "url": "<%=Url.Content("~/Application/ContentTree")%>/ContentStructure",
                        "data": function (n) { return { objectType: n.attr ? n.attr("objectType") : "", objectId: n.attr ? n.attr("objectId") : "" }; }
                    },
                    corret_state: true
                },
                "ui":
                {
                    "select_limit": 1,
                    "selected_parent_close": "select_parent"
                },
                "contextmenu":
                {
                    items: getContentMenu
                },
                "plugins": ["themes", "json_data", "ui", "contextmenu", "crrm"]


            });

        $("#contentTree").bind("dblclick.jstree", function (event) {
            var node = $(event.target).closest("li");
            var data = node.data("jstree");
            if (data != null) {
                if (data.defaultAction != null) {
                    $("#tb_" + data.defaultAction).click();
                }
            }
        });

        $("#contentTree").bind("select_node.jstree", function (e, data) {
            selectedNode = data.rslt.obj
            var toolbarButtons = $(data.rslt.obj).data().jstree.toolbarButtons;
            var objectId = $(data.rslt.obj).attr("objectId");
            var objectType = $(data.rslt.obj).attr("objectType");
            var buttons = new Array();
            buttons.push({ text: "Refresh", hasText: false, id: "refreshNode", icon: "<%=Url.Content("~/images")%>/icons/arrow_refresh.png" });
            if (toolbarButtons != null && toolbarButtons.length > 0) {

                for (var i = 0; i < toolbarButtons.length; i++) {
                    buttons.push({ text: toolbarButtons[i].Title, hasText: false, id: "tb_" + toolbarButtons[i].Id, icon: toolbarButtons[i].Icon });
                }
            }

            MethodWorx.CMS.Toolbar.setButtons(buttons, "#treeToolbar", true);

            if (toolbarButtons != null && toolbarButtons.length > 0) {
                for (var i = 0; i < toolbarButtons.length; i++) {
                    bindToolbarButton(toolbarButtons, i, objectId, objectType);
                }
            }

            $("#refreshNode").click(function () {
                $('#contentTree').jstree('refresh', selectedNode);
            });
        });

        $("#createRootPage").click(function () {
            window.parent.openDialog("<%=Url.Content("~/Content")%>/CreateRootPage", "Create Root Page");
        });

        $("#contentTree").bind("rename.jstree", function (e, data) {
            $.getJSON(renameAction, { newName: data.rslt.new_name });
        });
    });

    function refreshCurrentNode(parent) {
        if (parent) {
            $('#contentTree').jstree('refresh', $('#contentTree').jstree("_get_parent", selectedNode));
        }
        else {
            $('#contentTree').jstree('refresh', selectedNode);
            if (contextNode != null)
                $('#contentTree').jstree('refresh', contextNode);
        }
    }

    var renameAction;
    function renameCurrentNode(action) {
        renameAction = action
        $('#contentTree').jstree('rename', selectedNode);
    }

    function bindToolbarButton(toolbarButtons, i, objectId, objectType)
    {
        var actionId = toolbarButtons[i].Id;
        var contextText = toolbarButtons[i].ContextText;
        $("#tb_" + toolbarButtons[i].Id).click(function () {
            setContext(contextText);
            invokeAction(actionId, objectType, objectId);
        });
    }

    function invokeAction(actionId, objectType, objectId) {
        $.ajax({ url: '<%=Url.Action("InvokeAction", "ContentTree") %>', data: { actionId: actionId, objectType: objectType, objectId: objectId },
            success: function (data) {
                if (data != null) {
                    $(data).each(function () {
                        eval($(this).text());
                    });
                }
            }
        });
    }

   

        function getContentMenu(node) {
            var menuItems = node.data().jstree.menuItems;
            var objectId = node.attr("objectId");
            var objectType = node.attr("objectType");
            if (menuItems != null) {
                var items = new Object();

                // kill the default items
                items["create"] = false;
                items["rename"] = false;
                items["remove"] = false;
                items["delete"] = false;

                //
                //  now add the custom ones
                for (var i = 0; i < menuItems.length; i++) {
                    var menuItem = menuItems[i];
                    bindMenuItem(items, menuItem, objectType, objectId, node);
                }
                return items;
            }
            else
                return null;
        }

        function bindMenuItem(items, menuItem, objectType, objectId, node) {
            items["mi_" + menuItem.Id] =
                    {
                        label: menuItem.Title, action: function (obj) {
                            var invoke = true;
                            if (menuItem.Confirm != null)
                                invoke = confirm(menuItem.Confirm);

                            if (invoke) {
                                contextNode = node;
                                invokeAction(menuItem.Id, objectType, objectId);
                            }
                        }
                    }
        }

    </script>
    <div id="scriptContainer">
    </div>
</asp:Content>
